<template>
  <div class="wrapper">
    <el-dialog
        v-model="visible"
        title="物流信息"
        :width="'50%'"
        @close="handleClose"
        :before-close="handleBeforeClose"
        :modal="true"
        custom-class="dialog-with-scroll"
    >
      <div class="two-column">
        <el-timeline style="width: auto; height: 100%">
          <!-- 遍历历史物流信息，动态生成 Timeline 项目 -->
          <el-timeline-item
              v-for="(item, index) in logisticInfo"
              :key="index"
              :timestamp="formatDate(item.timeStamp)"
              :type="index === 0 ? 'primary' : 'info'"
              size="large"
          >
            <template #label>
              <div>{{ item.deliveryOrderNo }}</div>
            </template>
            <div>
              <div><strong>{{ item.location }}</strong></div>
              <div>{{ item.remarks }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>

        <div style="position: absolute; right: 30px; bottom: 70px;">
          <svg viewBox="0 0 1024 1024" height="160" width="160" version="1.1" fill="none"
               xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <clipPath id="master_svg0_37_530">
                <rect rx="0" height="1024" width="1024" y="0" x="0"></rect>
              </clipPath>
            </defs>
            <g clip-path="url(#master_svg0_37_530)">
              <g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#BBCFEF"
                        d="M650.0729791259765,462.99694871679685L649.9979791259766,490.4122347167969C649.9699791259766,501.14563471679685,642.9139791259765,511.8603347167969,628.8289791259765,520.0431347167969C583.5869791259765,546.3412347167969,504.31080612597657,527.7789347167968,504.41319274897654,490.0678347167969L504.4969635259766,462.6618347167969C504.38526912597655,500.0843347167969,583.1029791259766,519.2517347167968,628.9039791259765,492.6371347167969C642.9879791259766,484.4451347167969,650.0349791259766,473.73033471679685,650.0729791259765,462.99694871679685Z"></path>
                </g>
                <g transform="matrix(0.001919860951602459,-0.999998152256012,0.999998152256012,0.001919860951602459,-1.410890942369008,1008.1568884856838)">
                  <ellipse style="mix-blend-mode:passthrough" fill-opacity="1" fill="#DBE6FA" ry="72.79708862304688"
                           rx="42.16087341308594" cy="577.5823364257812" cx="546.5025634765625"></ellipse>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#CCD0D9"
                        d="M376.45046740722654,71.95926725585937C367.0014674072266,66.46690725585937,353.9224674072266,67.24886725585938,339.49346740722655,75.58981725585937L116.93156740722657,204.0644372558594C88.25026740722656,220.64443725585937,65.07065580722656,260.7754372558594,65.16374206522656,293.74843725585936L66.85799740722656,892.0434372558594C66.90453740722656,908.4464372558593,72.69479740722656,919.9804372558593,82.02246740722657,925.4074372558593L127.85116740722657,952.0404372558594C118.52346740722656,946.6224372558594,112.74246740722657,935.0794372558594,112.69596740722656,918.6764372558594L111.00166740722656,320.3814372558594C110.90866740722656,287.4184372558594,134.08826740722657,247.27743725585938,162.76956740722656,230.70743725585936L385.32246740722655,102.22313725585937C399.76046740722654,93.88213725585938,412.83946740722655,93.10023725585938,422.27946740722655,98.59253725585938L376.45046740722654,71.95926725585937Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#DBDFE6"
                        d="M385.3223580322266,102.21381497070313C414.0123580322266,85.65293497070313,437.34135803222654,98.95563497070313,437.43435803222656,131.90979497070313L439.1283580322266,730.2050949707032C439.2213580322266,763.2240949707032,416.04235803222656,803.3650949707031,387.36035803222654,819.9260949707032L164.80815803222657,948.4190949707031C136.11755803222655,964.9890949707031,112.78898803222657,951.6870949707031,112.69588803222656,918.6770949707031L111.00164032022656,320.3810949707031C110.90854643222656,287.4180949707031,134.08815803222657,247.27709497070313,162.76945803222657,230.70709497070314L385.3223580322266,102.21381497070313Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#EBF2FF"
                        d="M385.3961314697266,118.11374743164062C406.39813146972654,105.98399743164063,423.51713146972656,115.78647743164062,423.58213146972656,139.87836743164064L425.28613146972657,738.1738674316406C425.35113146972657,762.3588674316406,408.3431314697266,791.8218674316406,387.33313146972654,803.9518674316406L164.74303146972656,932.4638674316407C143.76973146972657,944.5658674316406,126.61304146972657,934.8378674316406,126.53857146972656,910.6528674316406L124.84431457472657,312.35686743164064C124.77915186972656,288.2648674316406,141.82413146972655,258.73686743164063,162.79743146972658,246.63486743164063L385.3961314697266,118.11374743164062ZM309.54613146972656,196.06806743164063C311.6121314697266,192.48406743164063,312.97213146972655,188.25776743164062,312.96213146972656,184.58996743164062C312.9441314697266,177.14266743164063,307.6561314697266,174.07996743164063,301.14013146972655,177.84086743164062L247.07313146972655,209.05426743164062C243.79613146972656,210.95336743164063,240.89113146972656,214.2018674316406,238.78713146972655,217.86086743164063C236.71213146972656,221.49086743164062,235.39013146972655,225.64286743164064,235.39913146972657,229.36686743164063C235.42713146972656,236.75786743164062,240.66813146972657,239.79286743164062,247.14713146972656,236.06886743164063L301.20513146972655,204.8465674316406C304.49113146972655,202.95686743164063,307.3861314697266,199.75446743164062,309.54613146972656,196.06806743164063Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F575F"
                        d="M385.32175256347654,109.16768248046876C410.64275256347656,94.55241248046875,431.3557525634766,106.29117248046875,431.42975256347654,135.35414248046874L433.13375256347655,733.6490424804688C433.20775256347656,762.7400424804688,412.64375256347654,798.3660424804688,387.31375256347656,812.9910424804688L164.77095256347656,941.4840424804687C139.45025256347657,956.0990424804687,118.78404256347656,944.2770424804687,118.70025256347657,915.1770424804688L117.00600433347657,316.89104248046874C116.92222596347656,287.83704248046877,137.44875256347657,252.28604248046875,162.77885256347656,237.66104248046875L385.32175256347654,109.16768248046876ZM425.28575256347654,738.1740424804688L423.58275256347656,139.87844248046875C423.5167525634766,115.78644248046875,406.39775256347656,105.98399248046874,385.38675256347653,118.11374248046874L162.79745256347655,246.62604248046875C141.82405256347656,258.72704248046875,124.77910256347656,288.26504248046876,124.84426256347656,312.35704248046875L126.53851256347656,910.6520424804687C126.61298256347656,934.8370424804688,143.76965256347657,944.5750424804687,164.74305256347657,932.4640424804687L387.33275256347656,803.9520424804688C408.3437525634766,791.8220424804688,425.3507525634766,762.3590424804687,425.28575256347654,738.1740424804688Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F575F"
                        d="M301.13080725097655,177.85017396484375C307.6472072509766,174.07998396484376,312.9440072509766,177.14268496484374,312.96270725097656,184.58995396484374C312.97200725097656,188.25771396484376,311.6128072509766,192.48401396484374,309.5462072509766,196.06801396484374C307.3865072509766,199.75441396484376,304.4914072509766,202.95681396484375,301.20530725097655,204.84651396484375L247.14740725097656,236.05991396484376C240.66825725097655,239.80211396484376,235.41792295097656,236.75811396484374,235.39930725097656,229.36671396484374C235.39930725097656,225.64301396484376,236.70257725097656,221.49121396484375,238.77850725097656,217.86061396484376C240.89166725097655,214.20211396484376,243.79609725097657,210.95331396484374,247.07290725097656,209.05421396484374L301.13080725097655,177.85017396484375Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M650.8738306884766,659.4093706542968L650.8078306884765,681.9746706542969L540.0858306884766,617.9838706542969L540.1510161884765,595.4186706542969L650.8738306884766,659.4093706542968Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M663.6080213134766,677.2176933105469L663.5522213134766,699.7922933105468C663.5708213134766,693.3410933105469,659.3165413134766,686.8898933105469,650.7987213134766,681.9745933105469L650.8731842134765,659.4093933105469C659.3816713134765,664.3152733105469,663.6266213134766,670.7664933105468,663.6080213134766,677.2176933105469ZM958.8367213134766,678.0648933105468L958.7717213134765,700.6300933105468C958.6317213134766,750.5267933105469,925.9107213134766,800.3303933105469,860.5327213134766,838.3203933105469L860.5977213134765,815.7553933105469C925.9657213134765,777.7653933105469,958.6967213134766,727.9522933105469,958.8367213134766,678.0648933105468Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M860.5977447509765,815.7555862402344L860.5327447509766,838.3208462402343L757.5177447509766,898.1783462402344L757.5827447509765,875.6224462402344L860.5977447509765,815.7555862402344ZM278.80774475097655,875.6130462402343L278.75174475097657,898.1875462402344L168.04774475097656,834.2806462402343L168.11291505097657,811.7061462402344L278.80774475097655,875.6130462402343Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M757.5833580322266,875.6130065917969L757.5183580322266,898.1875065917968C625.9243580322266,974.6617065917969,411.21035803222657,974.6617065917969,278.75135803222656,898.1875065917968L278.81651303222657,875.6222839317969C411.26635803222655,952.0965065917969,625.9893580322266,952.0965065917969,757.5833580322266,875.6222839317969L757.5833580322266,875.6130065917969Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F575F"
                        d="M859.0424088134765,538.4377356933594C991.4924088134766,614.9028356933594,992.1904088134766,739.2818356933594,860.5974088134766,815.7558356933594L757.5734088134766,875.6128356933593C625.9804088134765,952.0968356933594,411.2564088134766,952.0968356933594,278.80740881347657,875.6128356933593L168.10340881347656,811.7058356933594L376.28240881347654,690.7348356933594L486.9774088134766,754.6508356933593C503.8914088134766,764.4158356933594,531.2604088134765,764.4158356933594,548.0544088134766,754.6508356933593L651.0684088134765,694.7928356933594C667.8714088134766,685.0188356933594,667.7784088134765,669.1648356933594,650.8734088134765,659.4098356933594L540.1504088134766,595.4098356933594L748.3204088134765,474.4378356933594L859.0424088134765,538.4377356933594Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#DBE6FA"
                        d="M696.4594595947266,541.8077087402344L783.1464595947266,591.9185087402344L768.2144595947266,600.4084087402343L681.6304595947265,550.4186087402344L696.4594595947266,541.8077087402344ZM813.7634595947266,717.4797087402344C794.0564595947266,738.6667087402344,771.8724595947265,746.7097087402344,719.4434595947266,778.4537087402343L704.5774595947266,769.8707087402344C757.2764595947266,738.0247087402344,777.4674595947265,730.7727087402344,795.2754595947265,711.6897087402344L813.7634595947266,717.4797087402344ZM675.7194595947266,786.6367087402343L690.5944595947266,795.2197087402344C637.7474595947265,825.3157087402344,629.9924595947266,832.2047087402343,606.3104595947266,841.5227087402343L594.4874595947265,831.4137087402344C616.0574595947265,822.9887087402344,624.1654595947266,816.0167087402344,675.7194595947266,786.6367087402343ZM433.3384595947266,838.6097087402344C473.33045959472656,849.5197087402344,519.4564595947265,850.5067087402344,560.4534595947266,841.6167087402343L567.9014595947266,853.0197087402344C521.5604595947266,863.0927087402345,469.65345959472654,861.9197087402345,424.4204595947266,849.5757087402344L433.3384595947266,838.6097087402344ZM809.3884595947266,691.0417087402344C820.5404595947266,666.7077087402344,814.6204595947265,640.2420087402344,791.7014595947265,618.0492087402343L809.6954595947266,611.8121087402344C835.6304595947265,636.9280087402344,842.3234595947266,666.7357087402344,829.6914595947266,694.2347087402344L809.3884595947266,691.0417087402344ZM387.49045959472653,819.9167087402343C391.7264595947266,822.3647087402344,396.24145959472656,824.6647087402343,400.8034595947266,826.8057087402344L387.68645959472656,836.2817087402343C382.57815959472657,833.9227087402344,377.58295959472656,831.3257087402344,372.71745959472656,828.4997087402344L287.45545959472656,779.2827087402344L302.23825959472657,770.6907087402344L387.49045959472653,819.9167087402343Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#F04343"
                        d="M576.6142408447265,285.3887939453125L603.9178408447266,301.2514939453125C627.9725408447266,315.2243939453125,610.2480408447266,371.7771939453125,577.2473408447265,390.8237939453125L549.9437408447266,374.9608939453125C570.8426408447266,362.8962939453125,587.7200408447266,333.6563939453125,587.6455408447266,309.6575939453125C587.6176408447266,297.7232939453125,583.4099408447265,289.3358439453125,576.6142408447265,285.3887939453125Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#E22525"
                        d="M550.3347431884765,393.45804594726565L523.0311431884766,377.5953059472656C529.9105331884765,381.5888959472656,539.4337431884766,381.03036594726564,549.9437431884766,374.9608459472656L577.2473431884765,390.82354594726564C566.7280431884766,396.89304594726565,557.2141431884766,397.4516459472656,550.3347431884765,393.45804594726565Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#F04343"
                        d="M601.4884478759766,242.59494421875L628.7920478759766,258.45767421875C615.5265478759766,250.74037421875,597.1597478759766,251.82957421875,576.8845478759765,263.54037421875L549.5809478759766,247.66837421875C569.8561478759766,235.96688421875,588.2229478759766,234.87771421875,601.4884478759766,242.58564421875L601.4884478759766,242.59494421875Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#FF6161"
                        d="M576.8844689697265,263.54036171875C617.1740689697266,240.27696171875,649.9420689697265,258.94169171875,650.0720689697266,305.24516171875C650.2030689697266,351.53926171875,581.1200689697266,467.88476171875004,577.4802689697266,474.00976171875004C573.8217689697266,472.10176171875,504.31077596972654,435.76776171874997,504.18046569872655,389.48276171875C504.05012496972654,343.17036171875,536.5947689697266,286.80386171875,576.8844689697265,263.53116171875L576.8844689697265,263.54036171875ZM577.2474689697266,390.82376171875C598.1370689697266,378.75876171875,615.0240689697266,349.51916171875,614.9490689697266,325.52026171875C614.8840689697265,301.50286171875,597.8950689697266,291.82136171875,576.9961689697266,303.89526171875C556.1158689697265,315.95056171875,539.2291689697265,345.18106171875,539.2943689697265,369.19876171875C539.3687689697266,393.19776171875003,556.3578689697266,402.87876171875,577.2474689697266,390.82376171875Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#E22525"
                        d="M570.8241580322266,470.31433496093746L543.5205580322265,454.4513349609375C525.3398580322265,443.8853349609375,476.98848003222656,412.2063349609375,476.87675476122655,373.6113349609375C476.74641403222654,327.3076349609375,509.30035803222654,270.9317349609375,549.5807580322265,247.6683349609375L576.8843580322266,263.5403349609375C536.5945580322266,286.7944349609375,504.0499580322266,343.1703349609375,504.18035803222654,389.4733349609375C504.29195803222655,428.07833496093747,552.6341580322265,459.7573349609375,570.8241580322266,470.31433496093746Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#DBDFE6"
                        d="M274.39504162597655,310.51405446777346C284.63504162597656,304.60276446777345,292.9940416259766,309.3690344677734,293.02204162597656,321.12640446777345L293.3670416259765,440.0962044677734C293.39504162597655,451.85420446777346,285.08204162597656,466.2552044677734,274.8600416259766,472.15720446777345L125.54249562597656,558.3592044677735L125.07704162597656,396.7162044677734L274.39504162597655,310.51405446777346Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F91FF"
                        d="M424.2155486572266,224.013916015625L424.6810486572266,385.65691601562503L359.92694865722655,423.041916015625C349.69630865722655,428.953916015625,341.32743865722654,424.186916015625,341.29948465722657,412.429916015625L340.96437072722654,293.459716015625C340.92713925722654,281.693016015625,349.2401586572266,267.301216015625,359.47084865722655,261.389916015625L424.2155486572266,224.013916015625Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#FFCA6C"
                        d="M180.50322209472657,585.1135554980468C190.72462209472656,579.2023054980468,199.09352209472655,583.9778754980468,199.12142209472657,595.7258854980469L199.46592209472658,714.6963854980469C199.49382209472657,726.4623854980468,191.18082209472658,740.8543854980469,180.95942209472656,746.7663854980469L126.13816809472657,778.4163854980469L125.68202209472656,616.7551854980469L180.50322209472657,585.1135554980468Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#DBDFE6"
                        d="M424.21536975097655,444.3973083496094L424.68136975097656,606.0493083496094L266.02606975097655,697.6513083496094C255.79540975097657,703.5533083496093,247.42654375097655,698.7863083496094,247.39862075097656,687.0383083496093L247.06349182097657,568.0593083496094C247.02626035097657,556.3023083496093,255.33927975097657,541.9007083496094,265.56996975097655,535.9988083496094L424.21536975097655,444.3973083496094Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F575F"
                        d="M225.83883225097657,720.1511317138672C222.75407225097655,720.1511317138672,220.25338725097657,717.6501317138673,220.25338725097657,714.5661317138672L220.23477125097656,705.2571317138672C220.23281825097655,702.1741317138672,222.72842225097656,699.6731317138672,225.81093225097655,699.6681317138672C228.89343225097656,699.6621317138672,231.39738225097656,702.1551317138671,231.40568225097655,705.2381317138672L231.43358225097657,714.5471317138672C231.44388225097657,717.6391317138672,228.94021225097657,720.1511317138672,225.84816225097657,720.1511317138672L225.83883225097657,720.1511317138672ZM225.76436225097657,682.9431317138672C222.68686225097656,682.9431317138672,220.18917825097657,680.4531317138672,220.17890925097657,677.3761317138672L220.14167825097655,658.7761317138672C220.13652025097656,655.6951317138671,222.62738225097655,653.1921317138672,225.70851225097655,653.1811317138672L225.72712225097655,653.1811317138672C228.80465225097657,653.1811317138672,231.30238225097656,655.6711317138672,231.31258225097656,658.7481317138672L231.34978225097657,677.3481317138671C231.35498225097655,680.4291317138673,228.86410225097657,682.9321317138672,225.78297225097657,682.9431317138672L225.76436225097657,682.9431317138672ZM225.67126225097655,636.4531317138672C222.59376225097657,636.4531317138672,220.09608425097656,633.9641317138671,220.08581525097657,630.8861317138671L220.03927615097658,612.2871317138672C220.02896115097656,609.1981317138673,222.52701225097655,606.6881317138672,225.61542225097656,606.6831317138672L225.62472225097656,606.6831317138672C228.70949225097655,606.6831317138672,231.21018225097657,609.1831317138672,231.21018225097657,612.2681317138672L231.25668225097655,630.8581317138671C231.26188225097656,633.9431317138672,228.76535225097655,636.4481317138673,225.68057225097655,636.4531317138672L225.67126225097655,636.4531317138672ZM225.57817225097656,589.9631317138671C222.49342225097655,589.9691317138672,219.98855595097658,587.4721317138672,219.98341365097656,584.3871317138671L219.94618225097656,565.7881317138672C219.94422913097657,562.7051317138671,222.43983225097656,560.2041317138671,225.52234225097655,560.1991317138672C228.60486225097657,560.1941317138671,231.10878225097656,562.6871317138672,231.11708225097655,565.7691317138672L231.15428225097656,584.3691317138672C231.15948225097657,587.4531317138672,228.66296225097656,589.9581317138673,225.57817225097656,589.9631317138671ZM225.52232225097657,543.3251317138672C222.68191225097655,542.1351317138672,221.34099225097657,538.8701317138672,222.52479225097656,536.0271317138672C225.39456225097655,529.1911317138672,230.41878225097656,523.4811317138672,236.83288225097655,519.7641317138672L242.54868225097655,529.3611317138672C238.19258225097656,531.8541317138672,234.77758225097656,535.7111317138672,232.82998225097657,540.3371317138672C231.63958225097656,543.1821317138672,228.36799225097656,544.5241317138672,225.52232225097657,543.3341317138672L225.52232225097657,543.3251317138672ZM259.10948225097655,513.3501317138672C257.5715822509766,510.6781317138672,258.4881822509766,507.2661317138672,261.15748225097656,505.7251317138672L277.26228225097657,496.4351317138672C279.9363822509766,494.8861317138672,283.36018225097655,495.8011317138672,284.90458225097655,498.4781317138672C286.44888225097657,501.15513171386715,285.52738225097653,504.5771317138672,282.84768225097656,506.11613171386716L266.7429822509766,515.3981317138672C264.0697822509766,516.9421317138672,260.6507822509766,516.0251317138672,259.10948225097655,513.3501317138672ZM307.4422822509766,491.9201317138672L304.22138225097655,487.3311317138672L301.4379822509766,482.4901317138672C302.3688822509766,481.7451317138672,308.0380822509766,479.26013171386717,311.33348225097654,471.5891317138672C312.65358225097657,468.9301317138672,315.82118225097656,467.76513171386716,318.54988225097657,468.9351317138672C321.27818225097656,470.1051317138672,322.6181822509766,473.20313171386715,321.60118225097654,475.9921317138672C318.71188225097654,482.68313171386717,313.7479822509766,488.26713171386723,307.4422822509766,491.9201317138672ZM318.73428225097655,451.7981317138672C315.6494822509766,451.7981317138672,313.1487822509766,449.2971317138672,313.1487822509766,446.21213171386717L313.13018225097653,427.6221317138672C313.1217822509766,424.5351317138672,315.61928225097654,422.0271317138672,318.7062822509765,422.0221317138672C321.79318225097654,422.0161317138672,324.29918225097657,424.51713171386723,324.3011822509766,427.6041317138672L324.3201822509766,446.1941317138672C324.3251822509766,449.2791317138672,321.82818225097657,451.7831317138672,318.74358225097654,451.78913171386716L318.73428225097655,451.7981317138672ZM318.66908225097654,405.29913171386715C315.58798225097655,405.29913171386715,313.0887822509766,402.8041317138672,313.08368225097655,399.7231317138672L313.0556822509766,381.1234317138672C313.04738225097657,378.03643171386716,315.5447822509766,375.5279317138672,318.6317822509766,375.52283171386716C321.7191822509766,375.5176317138672,324.22518225097656,378.0177317138672,324.22618225097654,381.10483171386716L324.24518225097654,399.7041317138672C324.25018225097654,402.7851317138672,321.75918225097655,405.28913171386716,318.6783822509766,405.29913171386715L318.66908225097654,405.29913171386715ZM318.60388225097654,358.80953171386716C315.51918225097654,358.80953171386716,313.01848225097655,356.3088317138672,313.01848225097655,353.2240317138672L312.98128225097656,334.6338317138672C312.97608225097656,331.5490317138672,315.47258225097653,329.04413171386716,318.55738225097656,329.0390317138672C321.6421822509766,329.0339317138672,324.1471822509766,331.5304317138672,324.1521822509766,334.61523171386716L324.18018225097654,353.2147317138672C324.1851822509766,356.29593171386716,321.69418225097655,358.7992317138672,318.61328225097657,358.80953171386716L318.60388225097654,358.80953171386716ZM318.5201822509766,312.1431317138672C315.43538225097655,312.1431317138672,312.93468225097655,309.6424317138672,312.93468225097655,306.5576317138672L312.93468225097655,297.24858171386717C312.93468225097655,294.1710617138672,315.42408225097654,291.6733856138672,318.5015822509766,291.6631317138672L318.5108822509766,291.6631317138672C321.59518225097656,291.6631317138672,324.09618225097654,294.1638317138672,324.09618225097654,297.24858171386717L324.09618225097654,306.5576317138672C324.09618225097654,309.63513171386717,321.60718225097656,312.1328317138672,318.52948225097657,312.1431317138672L318.5201822509766,312.1431317138672Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="0.3764705955982208" fill="#FF6161"
                        d="M317.0304291259766,245.3876316015625C326.4140291259766,239.9697416015625,334.08472912597654,244.2891516015625,334.1126291259766,255.0969916015625C334.14992912597654,265.8955916015625,326.52572912597657,279.0399916015625,317.13292912597655,284.4578916015625C307.74930912597654,289.87579160156247,300.09724422597657,285.5470916015625,300.06932067867655,274.7577916015625C300.0413971259766,263.9499916015625,307.6376191259766,250.8055316015625,317.0304291259766,245.3876316015625Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#FF6161"
                        d="M317.0676085009766,256.09308345703124C321.3125885009766,253.63548345703126,324.78478850097656,255.59039345703124,324.7941885009766,260.47766345703127C324.8127885009766,265.35564345703125,321.35908850097655,271.31344345703127,317.11414850097657,273.76174345703123C312.86921850097656,276.21004345703125,309.40623470097654,274.25514345703124,309.3876190185766,269.37714345703125C309.3783111609766,264.4805634570312,312.81336850097654,258.5413534570313,317.0676085009766,256.08374345703123L317.0676085009766,256.09308345703124Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="0.3764705955982208" fill="#FF6161"
                        d="M224.82396350097656,729.2926930761719C234.21686350097656,723.8655130761719,241.88756350097657,728.1849030761718,241.91546350097656,739.0021530761719C241.94336350097655,749.7913530761718,234.32856350097657,762.9357530761719,224.93566350097657,768.3630530761719C215.55211350097656,773.7809530761718,207.90003970097655,769.4428530761719,207.87210082997657,758.6629530761719C207.83486940097657,747.8457530761718,215.44038350097657,734.7106630761718,224.82396350097656,729.2926930761719Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#FF6161"
                        d="M224.86102287597657,739.9795841699218C229.10592287597657,737.5312841699218,232.58752287597656,739.4861751699219,232.58752287597656,744.3827841699218C232.60622287597656,749.2607741699219,229.16182287597655,755.2092741699219,224.91688287597657,757.6575741699219C220.66263287597656,760.1151741699218,217.20895387597656,758.1509741699218,217.19033813477657,753.2729741699219C217.18103027597655,748.3763741699219,220.61609287597656,742.4372241699218,224.86102287597657,739.9889241699219L224.86102287597657,739.9795841699218Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M99.55166131347656,562.3341931933594L95.11122131347656,564.9221731933594C97.66191131347657,563.4326731933594,99.24446131347656,560.2768831933594,99.25377131347656,555.7992231933594L103.70351131347657,553.2112731933594C103.68490131347656,557.6982731933593,102.11165131347656,560.8447531933593,99.55166131347656,562.3341931933594Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M99.38420881347656,491.3058419433594L103.83390881347657,488.7272419433594L103.70360881347656,553.2112419433594L99.25390881347656,555.7992419433593L99.38420881347656,491.3058419433594ZM75.04090881347656,465.6779519433594L79.49065881347656,463.0993349433594C82.08788881347657,461.5819399433594,85.69050881347655,461.7960509433594,89.65620881347657,464.08609194335935L85.21570881347657,466.67401194335935C81.24075881347656,464.38397194335937,77.63814881347656,464.1605519433594,75.04090881347656,465.6779519433594Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M85.21571350097656,466.66470008789065L89.65615350097656,464.0860900878906C97.14061350097656,468.40552008789064,103.85251350097656,479.27849008789065,103.83391350097656,488.72729008789065L99.38411350097657,491.30589008789065C99.41211350097656,481.8571900878906,92.69091350097656,470.99344008789063,85.21572113036656,466.6740100878906L85.21571350097656,466.66470008789065Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F575F"
                        d="M85.21541662597656,466.6647080371094C92.69991662597656,470.9934380371094,99.41181662597657,481.8664380371094,99.38381662597656,491.30583803710937L99.25351662597656,555.7992380371094C99.23491662597657,564.8287380371094,92.84881662597657,568.4597380371093,84.99201662597656,563.9261380371094C77.09787662597657,559.3646380371093,70.71184542597656,548.3613380371094,70.74907684297656,539.3315380371093L70.87009462597656,474.8474380371094C70.89801762597656,465.78039803710936,77.32129662597656,462.1126080371094,85.20611662597656,466.67406803710935L85.21541662597656,466.6647080371094Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M99.82124006347657,448.4185690917969L95.38084006347657,451.0065690917969C97.93154006347656,449.5175690917969,99.51404006347656,446.37086909179686,99.52334006347657,441.8838690917969L103.97314006347656,439.30526909179684C103.95454006347657,443.7829690917969,102.37194006347656,446.93876909179687,99.82124006347657,448.4285690917969L99.82124006347657,448.4185690917969ZM99.65374006347656,377.3904690917969L104.09414006347656,374.8118690917969L103.97314006347656,439.30526909179684L99.52334006347657,441.8838690917969L99.65374006347656,377.3904690917969ZM75.31044006347656,351.7625690917969L79.75088006347656,349.18396009179685C82.35742006347657,347.6665650917969,85.95074006347656,347.8806760917969,89.92574006347657,350.18001909179685L85.47594006347656,352.75863909179685C81.51029006347656,350.4685990917969,77.90768006347656,350.25448909179687,75.31044006347656,351.7625690917969Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#2A3134"
                        d="M85.47596740722656,352.7586331933594L89.92571740722656,350.1800231933594C97.41026740722657,354.4994531933594,104.12206740722657,365.3631231933594,104.09416740722656,374.81192319335935L99.65366740722656,377.3998231933594C99.68166740722657,367.95112319335936,92.96046740722656,357.07806319335936,85.47596740722656,352.7586331933594Z"></path>
                </g>
                <g>
                  <path style="mix-blend-mode:passthrough" fill-opacity="1" fill="#4F575F"
                        d="M85.47605881347656,352.75869315429685C92.96055881347657,357.07812315429686,99.68175881347656,367.95118315429687,99.65385881347656,377.3998831542969L99.52345881347657,441.88398315429686C99.49555881347656,450.91348315429684,93.10955881347657,454.54448315429687,85.26195881347657,450.01078315429686C77.36785881347656,445.4492831542969,70.98182681347656,434.44598315429687,71.00975036617656,425.4254831542969L71.14007581347656,360.9320831542969C71.15869181347657,351.8650531542969,77.58196881347656,348.20657315429685,85.47605881347656,352.75869315429685Z"></path>
                </g>
              </g>
            </g>
          </svg>
        </div>
      </div>

      <template #footer>
        <el-button @click="handleBeforeClose(()=>visible = false)">关闭</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {ref, watch} from "vue";
import {getLogisticsHistory} from "@/api/delivery/delivery.js";
import {ElMessage} from "element-plus";

export default {
  props: {
    modelValue: {
      type: Boolean,
      required: true
    },
    deliveryId: {
      type: String,
      required: true
    }
  },
  setup(props, {emit}) {
    const logisticInfo = ref([]);

    const visible = computed({
      get: () => props.modelValue,
      set: (value) => emit("update:modelValue", value),
    });

    watch(() => props.deliveryId, (newId) => {
      if (visible.value) {
        fetchDetails();
      }
    });

    const fetchDetails = async () => {
      try {
        console.log("Fetching details for delivery:", props.deliveryId);
        const response = await getLogisticsHistory(props.deliveryId);
        console.log(response)
        logisticInfo.value = response || [];
        console.log(logisticInfo.value);
      } catch (error) {
        ElMessage.error("获取历史物流信息失败");
        console.error(error);
      }
    };

    const formatDate = (value) => {
      if (!value) return '';
      const date = new Date(value);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    const handleBeforeClose = (done) => {
      emit('update:modelValue', false);
      done();
    };

    const handleClose = () => {
      visible.value = false;
    };

    return {
      visible,
      logisticInfo,
      formatDate,
      handleClose,
      handleBeforeClose
    };
  }
};
</script>

<style scoped lang="scss">
.card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 10px;
}

.wrapper:deep(.el-dialog) {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80vh;
  max-width: calc(100% - 30px);
  justify-content: space-between;
  padding: var(--el-dialog-padding-primary, 16px) 0;
  overflow: hidden;
}

.wrapper:deep(.el-dialog__header) {
  padding: 16px var(--el-dialog-padding-primary, 16px);
  padding-top: 8px;
}

.wrapper:deep(.el-dialog__body) {
  flex: 1;
  overflow-y: auto;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.wrapper:deep(.el-dialog__footer) {
  padding: 0 var(--el-dialog-padding-primary, 16px);
  padding-top: 16px;
}

.two-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 90%;
  margin-top: 30px;
}
</style>